<template>
  <!-- 转派 -->
  <div class="order_content_detail">
    <div class="tabs">
      <div style="display: flex; width: 46%">
        <div :class="{ active: active == 0 }" @click="handleTab(0)">人员转派</div>
        <div :class="{ active: active == 1 }" @click="handleTab(1)">营服转派</div>
      </div>
      <van-field
        v-if="active == 1"
        v-model="gridName"
        style="width: 54%"
        center
        :clearable="true"
        placeholder="请输入营服名称"
      >
        <template #button>
          <van-icon name="search" color="#1989fa" @click="searchGrid" />
          <!-- <van-button size="small" type="primary">查</van-button> -->
        </template>
      </van-field>
    </div>
    <div class="tabs_contents" v-if="active == 0">
      <div class="item_content" v-for="(item, indexs) in ryLists" :key="indexs">
        <div class="content">
          <img src="./img/icon_ry.png" alt="" width="26" height="26" />
          <div class="detail">
            <div class="top">
              <div class="name">{{ item.realName }}</div>
              <div class="flex">
                <div class="phone">
                  <img src="./img/icon_zjgcs.png" alt="" width="16" height="16" />
                  <div>{{ item.post }}</div>
                </div>
                <div class="phone">
                  <img src="./img/icon_dh.png" alt="" width="16" height="16" />
                  <div>{{ item.phone }}</div>
                </div>
              </div>
            </div>
            <div class="bottom">
              <div class="title">在途工单量</div>
              <div class="tiele_content">
                <div class="label">装移修：</div>
                <div class="value">{{ item.zyxOrderNum }}</div>
              </div>
              <div class="tiele_content">
                <div class="label">直派：</div>
                <div class="value">{{ item.zpOrderNum }}</div>
              </div>
              <div class="tiele_content">
                <div class="label">服务：</div>
                <div class="value">{{ item.fwOrderNum }}</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 选中 -->
        <img
          width="16"
          height="16"
          :src="selectOrder == indexs ? require('./img/dx_pr.png') : require('./img/icon_btg.png')"
          alt=""
          @click="onSelectItem(item, indexs)"
        />
      </div>
    </div>
    <div class="tabs_contents" v-else>
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div class="item_content" v-for="(item, indexs) in yfLists">
          <div class="content">
            <img src="./img/icon_ry.png" alt="" width="26" height="26" />
            <div class="detail">
              <div class="top">
                <div class="name">{{ item.ceoName }}</div>
                <div class="phones">
                  <img src="./img/icon_dh.png" alt="" width="16" height="16" />
                  <span> {{ item.phone }}</span>
                </div>
              </div>
              <div class="bottom">{{ item.gridName }}</div>
            </div>
          </div>
          <img
            width="16"
            height="16"
            :src="selectOrder == indexs ? require('./img/dx_pr.png') : require('./img/icon_btg.png')"
            alt=""
            @click="onSelectItem(item, indexs)"
          />
        </div>
      </van-list>
    </div>
    <div class="reason">
      <div class="reason_title">转派理由</div>
      <van-field v-model="suggestion" rows="2" autosize type="textarea" placeholder="请输入转派理由" show-word-limit />
    </div>
    <div class="btns">
      <van-button type="default" @click="onRest">重置</van-button>
      <van-button type="info" @click="onSubmit" :loading="laodingBtn" loading-text="提交中...">提交</van-button>
    </div>
  </div>
</template>
        
  <script>
//   import order from './order'
import store from '@/store/'
import { mapState } from 'vuex'

import { personnelDispatch, gridDispatch, submitUrl } from '@/api/publicline/orderDispatch.js'
import { Toast } from 'vant'

export default {
  name: 'ordeDetail',
  //   components: { order },
  props: {
    content: Object,
    // selectActive:String
  },
  data() {
    return {
      active: 0,
      chosenAddressId: '1',
      ryLists: [],
      yfLists: [],
      loading: false,
      finished: false,
      refreshing: false,
      selectItem: false,
      suggestion: null,
      gridCode: null,
      gridName: null,
      records: null,
      pageNum: 1,
      pageSize: 10,
      laodingBtn:false
    }
  },
  computed: {
    ...mapState({
      // 后台菜单
      selectOrder: (state) => state.todoread.selectOrder,
    }),
  },

  mounted() {
    // this.gridCode = Vue.ls.get('VIRTUAL_USER_ORGCODE').split('/').pop()
    this.active = this.selectActive
    // this.getPersonnel()
  },
  methods: {
    onSelect(contact) {
      Toast('选择' + contact.id)
    },
    handleTab(val) {
      this.active = val
      store.commit('SET_SELECTORDER', null)
      this.records = null
      if (val == 0) {
        this.getPersonnel()
      } else {
        this.getGridDispatch()
      }
    },
    onSelectItem(item, indexs) {
      console.log('🚀 ~ onSelectItem ~ item:', item)
      store.commit('SET_SELECTORDER', indexs)
      this.records = item
    },
    getPersonnel() {
      personnelDispatch({ gridCode: this.content.gridCode })
        .then((res) => {
          this.ryLists = res.data
        })
        .catch((err) => {
          this.$message.error(err.message)
        })
        .finally(() => {
          this.loading = false
        })
    },
    getGridDispatch() {
      let params = {
        gridCode: this.content.gridCode,
        gridName: this.gridName,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }
      this.loading = true

      gridDispatch({ ...params })
        .then((res) => {
          console.log('🚀 ~ .then ~ res:', res)
          // if (res.code == 200) {
          // this.yfLists = res.result.list
          this.yfLists.push(...res.result.list)
          this.loading = false
          this.finished = res.result.list.length < this.pageSize
        })
        .catch((err) => {
          this.$message.error(err.message)
        })
        .finally(() => {
          this.loading = false
        })
    },

    onLoad() {
      setTimeout(() => {
        // if (this.refreshing) {
        //   this.list = []
        //   this.refreshing = false
        // }

        // for (let i = 0; i < 10; i++) {
        //   this.list.push(this.list.length + 1)
        // }
        // this.loading = false

        // if (this.list.length >= 20) {
        //   this.finished = true
        // }
        this.pageNum += 1
        this.getGridDispatch()
      }, 1000)
    },
    searchGrid() {
      this.pageNum = 1
      this.pageSize = 10
      this.yfLists.length = 0
      this.getGridDispatch()
    },
    onRest() {
      store.commit('SET_SELECTORDER', null)
      this.records = null
    },
    onSubmit() {
      if (!this.records) {
        Toast('请选择列表项')
        return
      }
      let params = {
        gridCode: this.content.gridCode,
        orderId: this.content.orderNumber,
        orderType: this.content.type,
        operationType: this.active,
        //人员工号，营服编码
        data: this.active == 0 ?this.content.type==1?this.records.phone: this.records.username : this.records.gridCode,
        suggestion: this.suggestion,
      }
      this.laodingBtn=true
      submitUrl({ ...params })
        .then((res) => {
          if(res.code==1){
            this.$emit('reload')
            this.laodingBtn=false
            Toast(res.message)
          }else{
            Toast(res.message)
          }
        })
        .catch((err) => {
          this.laodingBtn=false
          Toast(err.message)
        })
        .finally(() => {
          this.laodingBtn = false
        })
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    },
  },
}
</script>
  <style lang="less" scoped>
//   .order_content_detail{
//     height: 200px;
//   }
.tabs {
  height: 30px;
  margin: 10px;
  display: flex;
  border-bottom: 1px solid #eeeeee;
  margin: 12px;
  padding-bottom: 34px;
  div {
    width: 100px;
    height: 24px;
    font-size: 16px;
    color: #333333;
    position: relative;
    text-align: center;
  }
  .active::before {
    content: '';
    width: 16px;
    height: 2px;
    position: absolute;
    // bottom: -2px;
    bottom: -4px;
    // left: 44px;
    left: 32px;
    background-color: #4d98ff;
    border: 1px solid #4d98ff;
    //   border-radius: 20px;
  }
  .active {
    font-family: PingFangSC-Medium;
    color: #4d98ff;

    // border-bottom-width: 2px; /* 设置底部边框宽度为2px */
    // border-bottom-style: solid; /* 设置底部边框样式为实线 */
  }
}
.tabs_contents {
  max-height: 300px;
  overflow-y: auto;
  .item_content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e6e6e6;
  }
  .content {
    display: flex;
    align-items: center;
    margin-left: 10px;
    width: 90%;
    .detail {
      .top {
        display: flex;
        margin-left: 10px;
        margin-bottom: 6px;
        .name {
          font-family: PingFangSC-Medium;
          font-size: 16px;
          color: #333333;
          font-weight: bold;
          margin-right: 8px;
          min-width: 50px;
        }
        .flex {
          display: flex;
          background: rgba(77, 152, 255, 0.1);
          .phone {
            display: flex;
            // height: 24px;
            // line-height: 24px;
            font-size: 12px;
            color: #4d98ff;
            // background: rgba(77, 152, 255, 0.1);
            border-radius: 4px;
            padding: 0 10px;
            position: relative;
            &:nth-child(odd) {
              &::before {
                content: '';
                width: 1px;
                height: 12px;
                position: absolute;
                bottom: 30%;
                left: 100%;
                // bottom: 5px;
                // left: 0;
                // background-color: #4d98ff;
                border: 1px solid #4d98ff;
              }
              // border-left: 1px solid red;
            }
          }
        }
      }
      .phones {
        height: 24px;
        line-height: 24px;
        font-size: 12px;
        color: #4d98ff;
        background: rgba(77, 152, 255, 0.1);
        border-radius: 4px;
        padding: 0 10px;
      }
      .bottom {
        display: flex;
        align-items: center;
        margin-left: 10px;
        font-size: 12px;
        color: #666666;
        .title {
          font-size: 12px;
          color: #666666;
          background: linear-gradient(20deg, #bbe4f3 0%, #e3ebeec4 30%);
        }
        .tiele_content {
          display: flex;
          align-items: center;
          margin-left: 6px;
          .label {
            font-size: 12px;
            color: #999999;
          }
          .value {
            font-size: 12px;
            color: #000;
          }
        }
      }
    }
  }
}
.reason {
  margin-left: 20px;
  padding-top: 14px;
}
.btns {
  display: flex;
  margin-bottom: 10px;
}
/deep/ .van-field__body {
  background: rgba(77, 152, 255, 0.04);
}
/deep/ .van-button {
  width: 46%;
  margin: 10px;
  border-radius: 10px;
}
/deep/ .van-button--default {
  background: #f0f0f0;
}
</style>
        